<template>

  <div class="petFormWrapper">
    <form :model="formState" @finish="onFinish">
      <a-form-item label="品种种类" id="name" name="kind" :rules="[{required: true, message: '请输入品种种类！', trigger: 'focus'}]">
        <a-inpht v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')"/>
      </a-form-item>

      <a-form-item label="品种名" id="name" name="name" :rules="[{required: true, message: '请输入品种名！', trigger: 'focus'}]">
        <a-inpht v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')"/>
      </a-form-item>

      <a-button class="custom-theme-button" @click="reloadData">重新渲染数据</a-button>

    </form>
  </div>

</template>

<script lang="ts">

import { defineComponent, reactive } from 'vue';
import { Form } from 'ant-design-vue';

export default defineComponent({

  props:['onChange', 'reloadData'],
  components: { Form },
  setup(props) {
    const formState = reactive({
      kind: '',
      name: '',
    });

    const onFinish = () => {
      console.log(formState);
    };

    const onNameChange = (event, name) => {
      props.onChange(name, event.target.value);
    };

    const reloadData = async () => {
      await props.reloadData();
    }

    return {
      formState,
      reloadData,
      onNameChange,
      onFinish
    }

  }


})

</script>

<style lang="scss">
.petFormWrapper {

  .custom-theme-button {
    background-color: var(--oio-custom-theme-var);
    color: black;
  }

}


</style>